<html>
<head>
<style type="text/css">
    table, td, th {
        border: 1px solid #333;
        border-collapse: collapse;
    }
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Key</th>
                <th>Code</th>
                <th>Location</th>
            </tr>
        </thead>
        <tbody id=table></tbody>
    </table>

    <script type="text/javascript">
        let table = document.getElementById('table');

        document.addEventListener('keydown', (event) => {
            let row = document.createElement('tr');
            table.prepend(row);

            let key = document.createElement('td');
            key.textContent = event.key;
            row.append(key);

            let code = document.createElement('td');
            code.textContent = event.code;
            row.append(code);

            let location = document.createElement('td');
            switch (event.location) {
            case KeyboardEvent.DOM_KEY_LOCATION_STANDARD:
                location.textContent = 'Standard';
                break;
            case KeyboardEvent.DOM_KEY_LOCATION_LEFT:
                location.textContent = 'Left';
                break;
            case KeyboardEvent.DOM_KEY_LOCATION_RIGHT:
                location.textContent = 'Right';
                break;
            case KeyboardEvent.DOM_KEY_LOCATION_NUMPAD:
                location.textContent = 'Numpad';
                break;
            }
            row.append(location);
        });
    </script>
</body>
</html>
